<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="layui-btn-container">
        <button class="layui-btn demo-dropdown-base">
            <span>下拉菜单</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-primary demo-dropdown-base">
            <span>下拉菜单</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var dropdown = layui.dropdown;
            // 渲染
            dropdown.render({
                elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                data: [{
                    title: 'menu item 1',
                    id: 100
                }, {
                    title: 'menu item 2',
                    id: 101
                }, {
                    title: 'menu item 3',
                    id: 102
                }],
                click: function (obj) {
                    this.elem.find('span').text(obj.title);
                }
            });
            // 绑定输入框


        });
    </script>

</body>

</html>